import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions  from './_store/Actions.js'
import Item from './_item'
class View extends Component {
    constructor(props) {
        super(props);
    }
    reLists() {
        const { twoData } = this.props
        console.log(twoData)
        return twoData.map((val, index) => {
            return (
               <Item key={index} val={val}></Item>
            )
        })
    }
    render() {
        const { twoData, onAddFn } = this.props;
        console.log(twoData.length)
        return (
            <React.Fragment>
                1
                {twoData.length !== '' ? this.reLists() : ''}
                <input type="button" value='点击' onClick={() => { onAddFn('点击事件') }} />
            </React.Fragment>
        )
    }
}
//需要渲染什么数据
//作为函数，mapStateToProps执行后应该返回一个对象
function mapStateToProps(state) {
    console.log(state.two)
    return {
        twoData: state.two
    }
    // 冒号之前 自定义数据名称
    // 冒号之后 Store.js 合并拆分时定义的名称
    // state 相当于 最大的那个store(一个页面只是一个store)
    // state = {
    //     first: [],
    //     two: {}
    // }
}
//是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。
const mapDispatchToProps = (dispatch, ownProps) => {
    //dispath唯一可以修改...的方法,里面是个对象
    // dispatch(
    //     type:"TODO_ADD",
    //     text:"描述",
    // })
    return {
        onAddFn: (text) => dispatch(actions.add(text))
    }
    // 冒号之前就是我们定义的事件方法名
    // 同样是挂到props之上
};

export default connect(mapStateToProps, mapDispatchToProps)(View);
/*
jsx
1.state
2.setState
3.函数 事件 调用

mobx
1.state
2.setState(action)
3.view  (函数 事件 调用)

最外层一个大的store(整个项目) src/store/store.ks
n个小的state (每个页面) 合并生成的
是通过reducer 计算出来的
reducer 是通过 每个actions type名称做了对应的事
state action
想修改 state 必须是靠action

view (props之上)
数据获取
一个修改数据 dispath 修改

1. state怎么来的? reducer 根据 action计算生成

2. setState === dispath 操作了 具体 action

3.函数 调用

hook
1.state
2.setState
3.函数调用
const [state,setState] = useState()

redux
1.state
2.action (唯一修改state)
3.reducer (生成state)
4.views (函数 事件 调用)
一个项目只有一个 store
有多个state片段生成大的 state

props
context

数组合并
对象的合并
两个及两个以上
{...data}
[]中括号运算符

yarn add react-redux redux
yarn add redux

1.views 关联
2.views 对应store
views
    tworedux
        index.jsx
        _store(文件夹)
            Action.js
            ActionType.js //定义变量
            Reducer.js

//需要渲染什么数据
//作为函数，mapStateToProps执行后应该返回一个对象
function mapStateToProps(state) {
  return {
      data:state.first
  }
}
//是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        onAdd: () => dispatch(actions.add('id'))
    }
};



*/